<html>
	<head>
		<title><?php echo $lesson->name;?></title>
		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="/codealong/css/editor.css">
		<style type="text/css" media="screen">
    #editor { 
        width: 100%;
        height: 90vh;
    }
</style>
	</head>
	<body>


    <div class="col-md-3" >
    	 
      	<iframe id="lessonPartsFrame"  frameborder="0" style="width: 100%; height: 75vh;" id="lessonView" src="<?php echo $lesson_parts_root.'/lessons/lesson_parts/'?>" seamless>

      	</iframe>
      		
      		<div class="btn-group" role="group">
			  <button type="button" class="btn btn-default" onclick="lastPart()">Left</button>
			  <button type="button" class="btn btn-default">Middle</button>
			  <button type="button" class="btn btn-default" onclick="nextPart()">Right</button>
			</div>
		
      	
    </div>
    <div class="col-md-9">
    	<ul  id='fileTab' class="nav nav-tabs" role="tablist">
    		
    		<button  type="button" class="btn btn-normal" data-toggle="modal" data-target="#addFileModal"><span class="glyphicon glyphicon-plus"></span> Add File</button>
    			
		</ul>
		<div id="editor"></div>
		<button type="button" class="btn btn-success" aria-label="Left Align" onclick="saveCurrentFile()">
 			<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
  			Save
		</button>
		<button  type="button" class="btn btn-normal" data-toggle="modal" data-target="#youtubeModal">Watch Video</button>
		
    </div>
    <iframe id="previewFrame" style="position: absolute; right:25px; top:50px; width: 400px; height: 80%; background: white;" src='<?php echo '../../../'.$directory; ?>'>
    </iframe>
	




    <?php $this->load->view('lessons/add_file'); ?>
    <?php $this->load->view('lessons/preview_file'); ?>
    <!--  Ace Import -->
    <?php 
    	$data['youtube_link'] = $lesson->youtube_link;
    	$this->load->view('lessons/youtube_modal', $data);
    ?>


   	
	

	<script src="https://code.jquery.com/jquery-2.1.3.min.js">
	</script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="/codealong/js/app.js">
	</script>
	<script src="../../../ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

	<script>
		var editor;
		var lesson;
		var directory;
		var lesson_parts_root = <?php echo json_encode($lesson_parts_root); ?>;
		var lesson_parts = <?php echo json_encode($lesson_parts); ?> ;
		var current_part = 0;
		$(document).ready(function()
		{
		    editor = ace.edit("editor");
		    editor.setTheme("ace/theme/twilight");
		    editor.getSession().setMode("ace/mode/php");
		    directory = <?php echo json_encode($directory); ?> ;
			var files = <?php echo json_encode($files); ?>;
			lesson = <?php echo json_encode($lesson->id) ?>;
			openFiles(files, lesson);
			 $("#previewFrame").src = directory + '/' + currentFile.name;
			editor.getSession().on('change', function(e) {
			    currentFile.contents = editor.getValue();


			})
			changePart(current_part);
			
			
			console.log();
		});	
		
	</script>

	</body>
</html>